import React from 'react'
import PropTypes from 'prop-types'
import {
  Modal, StatusBar, View, StyleSheet
} from 'react-native'

const backgroundColor = 'rgba(0,0,0,0.7)'
export default class CustomModal extends React.Component {
  static defaultProps = {
    animationType: 'none',
    transparent: true,
    visible: false,
    backgroundColor: backgroundColor,
    barStyle: 'dark-content'
  }

  static propTypes = {
    animationType: PropTypes.string,
    visible: PropTypes.bool,
    children: PropTypes.node,
    transparent: PropTypes.bool,
    onShow: PropTypes.func,
    onDismiss: PropTypes.func,
    onRequestClose: PropTypes.func,
    backgroundColor: PropTypes.string,
    maskViewStyle: PropTypes.object,
    barStyle: PropTypes.string
  }

  render () {
    const {
      animationType,
      children,
      visible,
      transparent,
      onShow,
      onRequestClose,
      backgroundColor,
      maskViewStyle,
      onDismiss,
      barStyle
    } = this.props
    return (
      <Modal
        animationType={animationType}
        transparent={transparent}
        visible={visible}
        onShow={onShow}
        onDismiss={onDismiss}
        onRequestClose={onRequestClose}
      >
        <View style={[styles.maskView, maskViewStyle]}>
          <StatusBar
            backgroundColor={backgroundColor}
            barStyle={barStyle}
          />
          {children}
        </View>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  maskView: {
    width: '100%',
    height: '100%',
    backgroundColor: backgroundColor,
    position: 'relative'
  }
})
